<template>
  <div class="outer">
    <h2>Count 组件</h2>
    <!-- <input type="text" value="{amount}" onChange="{iptChangeHandler}" /> -->
    <input type="text" v-model.number="amount" />
    <!-- 方式一：基础写法，可以使用计算属性 -->
    <!-- <h4>count: {{$store.state.count}}</h4> -->
    <h4>count: {{ count }}</h4>
    <h4>movie 组件的电影数量: {{ movieList.length }}</h4>
    <div>
      <button @click="increase({ amount })">加</button>
      <button @click="decrease({ amount })">减</button>
      <button @click="increaseIfOddAction({ amount })">偶数加</button>
      <button @click="increaseDelayAction({ amount })">延迟加</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  name: "Count",
  data() {
    return {
      amount: 1,
    };
  },
  computed: {
    // 方式二：计算属性
    /* count() {
      return this.$store.state.count
    } */
    // 方式三：辅助函数 mapState
    ...mapState("Count", ["count"]), // 模块化需要 命名空间
    ...mapState("Movie", ["movieList"]),
  },
  methods: {
    // 方式一：直接书写
    /* increase(payload) {
      this.$store.commit("increase", payload); // 常规写法
      // this.$store.commit({ type: "increase", ...payload });  // 对象写法
    }, */
    ...mapMutations("Count", ["increase", "decrease"]),

    // 方式一：直接书写
    /* increaseIfOddAction(payload) {
      this.$store.dispatch("increaseIfOddAction", payload);
    }, */
    ...mapActions("Count", ["increaseIfOddAction", "increaseDelayAction"]),
  },
  mounted() {
    console.log(this, "count this");
    console.log(mapState("Count", ["count"]), "mapState"); // 同名使用数组，不同命使用对象
    /* mapState(["count"]) ==> {count: ƒ mappedState()} */
    console.log(mapMutations("Count", ["increase"]), "mapMutations"); // 同名使用数组，不同命使用对象
    /* mapMutations(["increase"]) ==> {increase: ƒ mappedMutation()} */
    console.log(
      mapActions("Count", ["increaseIfOddAction", "increaseDelayAction"]),
      "mapActions"
    ); // 同名使用数组，不同命使用对象
    /* {increaseIfOddAction: ƒ, increaseDelayAction: ƒ} */
  },
};
</script>

<style scoped>
.outer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>